$(function () {
    drawGuanxi();

    function drawGuanxi ()  {
        var constMaxDepth = 2;
        var constMaxChildren = 7;
        var constMinChildren = 4;
        var constMaxRadius = 10;
        var constMinRadius = 2;
        var myChart = echarts.init(document.getElementById('echart_User_profile'));
        var nodes = [//展示的节点  
                {  
                    "name": "株洲中车",//节点名称  
                    "value": 30,
                    "depth": 0,
                    "id": 0,
                    "category": 3//与关系网类别索引对应，此处只有一个关系网所以这里写0  
                },  
                {  
                    "name": "股权链",  
                    "value": 20,  
                    "category": 2,
                    "depth": 1,
                    "id": 1,  
                },  
                {  
                    "name": "信用链",  
                    "value": 20,  
                    "category": 2,
                    "depth": 1,
                    "id": 2, 
                },
            {
                    "name": "供应链",
                    "value": 20,
                    "category": 2,
                    "depth": 1,
                    "id": 3
                },{
                    "name": "愉悦投资66.67%",  
                    "value": 10,
                    "category": 1,
                    "depth": 2,
                    "id": 4
                },{
                    "name": "IKEA Supply AG18.45%",
                    "value": 10,
                    "category": 1,
                    "depth": 2,
                    "id": 5
                },{
                    "name": "江苏明源纺织6.31%",
                    "value": 10,
                    "category": 1,
                    "depth": 2,
                    "id": 6, 
                }, 
                {  
                    "name": "山东祥瑞祥纺织6.55%",
                    "value": 10,  
                    "category": 1 ,
                    "depth": 2,
                    "id": 7
                },{  
                    "name": "愉悦家纺100%",  
                    "value": 10,
                    "category": 1,
                    "depth": 2,
                    "id": 8
                },{  
                    "name": "东力热电45%",  
                    "value": 10,
                    "category": 1,
                    "depth": 2,
                    "id": 9
                },{  
                    "name": "愉悦物流60%",  
                    "value": 10,
                    "category": 1,
                    "depth": 2,
                    "id": 10
                },{  
                    "name": "居家悦品90%",  
                    "value": 10,
                    "category": 1,
                    "depth": 2,
                    "id": 11
                },{  
                    "name": "黄河三角洲19.29%",  
                    "value": 10,
                    "category": 1 ,
                    "depth": 2,
                    "id": 12
                },{  
                    "name": "关联公司21.77%",
                    "value": 10,  
                    "category": 1 ,
                    "depth": 2,
                    "id": 13
                }
                ,{  
                    "name": "中国银行56.34%",
                    "value": 10,  
                    "category": 1 ,
                    "depth": 2,
                    "id": 14
                },{  
                    "name": "银行授信455.89%",
                    "value": 10,  
                    "category": 1 ,
                    "depth": 2,
                    "id": 15
                },{  
                    "name": "存续债券33.56%",
                    "value": 10,  
                    "category": 1 ,
                    "depth": 2,
                    "id": 16
                }
        ];
        var links =  [//节点之间连接  
            {  
                "source": 0,//起始节点，0表示第一个节点  
                "target": 1,
            },
            {  
                "source": 0,  
                "target": 2  
            },
            {  
                "source": 0,//起始节点，0表示第一个节点  
                "target": 3,
            },{
                "source": 1,  
                "target": 4,
                "weight": 1
            },{
                "source": 1,  
                "target": 5
            },{  
                "source": 1,
                "target": 6
            }
            ,{  
                "source": 1,
                "target": 7
            },{
                "source": 2,
                "target": 8  
            },{
                "source": 2,
                "target": 9  
            },
            {
                "source": 2,
                "target": 10 
            },{
                "source": 2,
                "target": 11
            },{
                "source": 3,
                "target": 12 
            },{
                "source": 3,
                "target": 13 
            },{
                "source": 3,
                "target": 14 
            },{
                "source": 3,
                "target": 15 
            },{
                "source": 3,
                "target": 16 
            }
        ];
        for(var i=0; i<nodes.length; i++){
            if(nodes[i].depth == "2"){
                nodes[i]["symbolSize"] = 30;
                nodes[i].itemStyle = {
                    textStyle: {
                        color: '#FFFFFF', // 文本颜色
                        fontSize: 14  // 字体大小
                    },
                    normal: {
                        // borderColor: '#FFFF00',
                        color: "#32dbb3",
                        label: {
                            show: false
                        }
                    }
                };
            nodes[i].label = {
                show: false, // 默认不显示
                position: 'right',
                formatter: '{b}',
                textStyle: {
                    color: '#FFFFFF',
                    fontSize: 14
                }
            };
            }
            if(nodes[i].depth == "1"){
                nodes[i]["symbolSize"] = 50;
                nodes[i].itemStyle = {
                    normal: {
                        // borderColor: '#FFFF00',
                        color: '#07a7c0',
                        label: {
                            show: true
                        }
                    },
                };
                nodes[i].label = {
                    show: true,
                    textStyle: {
                        color: '#FFFFFF',
                        fontSize: 14
                    }
                };
            }
            if(nodes[i].depth == "0"){
                nodes[i]["symbolSize"] = 70;
                nodes[i].itemStyle = {
                    normal: {
                        // borderColor: '#000',
                        color:'#0182c8',
                        label: {
                            show: true
                        }
                    }
                };
                nodes[i].label = {
                    show: true,
                    textStyle: {
                        color: '#FFFFFF',
                        fontSize: 14
                    }
                };
            }
        };
        option = {
            title : {
                x:'right',
                y:'bottom'
            },
            tooltip : {
                trigger: 'item',
                formatter: '{b}'
            },
            toolbox: {
                show : true,
                feature : {
                    restore : {show: true},
                    magicType: {show: true, type: ['force', 'chord']},
                    saveAsImage : {show: true}
                }
            },
            // legend: {
            //     x: 'left',
            //     data:['四级','三级', '二级'],
            //     orient: 'left',
            //     x: 10,
            //     y: 10,
            //     textStyle: {
            //         fontSize: '14',
            //         color: '#fff'
            //     }
            // },
            series : [
                {
                    type:'graph',
                    layout:'force',
                    force:{
                        repulsion:300,
                        edgeLength:[15,20]
                    },
                    data : nodes,
                    links : links,
                }
            ]
        };
            
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
})